<template>
  <div class="shouc">
    <!-- 收藏/历史 -->
    <van-nav-bar
      class="nav-main"
      title="收藏/历史"
      left-arrow
      :fixed="true"
      @click-left="$router.go(-1)"
    />
    <div class="wode">
      <van-tabs
        v-model="active"
        color="pink"
        title-active-color="pink"
        sticky
        offset-top="46px"
      >
        <van-tab title="我的收藏">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="别拉了,我也是有底线的"
            @load="onLoad"
          >
            <van-cell v-for="(item, index) in 6" :key="index">
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <!-- 标题 -->
                <h2>詹姆士为什么是NBA历史最强</h2>
                <!-- 图片 -->
                <van-grid :border="false" :column-num="3">
                  <van-grid-item>
                    <van-image
                      src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1104651813,2848600657&fm=26&gp=0.jpg"
                    />
                  </van-grid-item>
                  <van-grid-item>
                    <van-image
                      src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=125086573,392712755&fm=26&gp=0.jpg"
                    />
                  </van-grid-item>
                  <van-grid-item>
                    <van-image
                      src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1541006187,3803005417&fm=26&gp=0.jpg"
                    />
                  </van-grid-item>
                </van-grid>
                <!-- 作者,评论,事件 -->
                <div class="yongjian">
                  <span class="zuo">叫爸爸</span>
                  <span class="ping">0评论</span>
                  <span class="shi">10个月前</span>
                </div>

                <!-- 评论,点赞,分享 -->
                <van-grid :column-num="3" direction="horizontal">
                  <van-grid-item icon="comment-o" text="评论" />
                  <van-grid-item icon="like-o" text="点赞" />
                  <van-grid-item icon="certificate" text="分享" />
                </van-grid>
              </template>
            </van-cell>
          </van-list>
        </van-tab>
        <van-tab title="我的历史">
          <lishi ref="lishi" />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import lishi from './lishi'
import { apiCollecti } from '@/api/article.js'
export default {
  components: {
    lishi
  },
  data () {
    return {
      active: 2, // 绑定的标签栏为两个
      loading: false, // list组件是否处于加载, true正在加载,false已加载完成
      finished: false, // list 组件中的数据源是否加载完毕： true 数据源加载完毕没有更多了 & false 数据没有加载完毕，还可以继续加载
      page: 1, // 页数
      perpage: 10, //每页数量,页容量
      wenzList: [] // 搜索结果文章数组
    }
  },
  methods: {
    async onLoad () {
      const res = await apiCollecti({
        page: this.page,
        perpage: this.perpage
      })
    console.log(res)
      // 连接数组,为了每次上拉拼接,而不是都是10条, loading加载完成,页码要加加,判断长度不为0,为零就全部加载完毕
      this.wenzList=[...this.wenzList,...res.data.data.results]
      this.loading=false
      this.page++
      if(res.data.data.results.length===0){
          this.finished=true
      }
    }
  },
  created(){
    
  }
}
</script>

<style lang="less" scoped>
.shouc {
  margin-top: 46px;
  .nav-main {
    z-index: 999;
    background-color: #3e9df8;
    /deep/ .van-nav-bar__title {
      color: #fff;
    }
  }
  /deep/ i.van-icon.van-icon-arrow-left.van-nav-bar__arrow,
  /deep/ .van-nav-bar__text {
    color: #fff;
  }
  .heng {
    display: flex;
  }
  .yongjian {
    color: #b2b2b2;
    .ping {
      margin: 0 15px;
    }
  }
  .wode {
  }
}
</style>
